<template>
  <div>
    <van-nav-bar
      fixed
      placeholder
      safe-area-inset-top
      title="我的房源管理"
      @click-left="back"
    >
      <template #left>
        <van-icon name="arrow-left" size="16px" color="#333" />
      </template>
      <template #right>
        <van-icon @click="toadd" size="20px" color="#45B7CB" name="add-o" />
      </template>
    </van-nav-bar>
    <div class="notice">
      <img src="@/assets/notice.png" alt="" width="14px" height="14px" />
      <div>房源上架后,请留意租客通过隐私号码与您联系!</div>
    </div>
    <div class="nomore" v-if="houselist.length == 0">
      您还没有上传房源，点击<van-icon
        size="20px"
        color="#45B7CB"
        name="add-o"
        style="vertical-align: middle"
      />发布
    </div>
    <div v-for="item in houselist" :key="item.index" class="hpart">
      <div class="house">
        <van-image
          width="88px"
          height="88px"
          lazy-load
          :src="item.houseImage"
          fit="cover"
          radius="5px"
        />
        <div class="tuihui" v-if="item.putaway == 3">
          <van-icon @click="goBond" size="12px" name="question-o" />保证金:<span
            >{{ item.caution_money == 0 ? "已退回" : "退款中" }}</span
          >
          <div>
            <div
              class="shan"
              @click="removeHouse(item.houseId, item.caution_money)"
            >
              删除房源
            </div>
          </div>
        </div>
        <div class="tuihui" v-if="item.putaway == 2">
          <van-icon @click="goBond" size="12px" name="question-o" />保证金:<span
            >￥100</span
          >
        </div>
        <div v-if="item.houseCheckStatus == 3" class="fail">未通过</div>
        <div
          v-if="item.houseCheckStatus == 2 && item.payMargin == 1"
          class="unshelf"
        >
          待上架
        </div>
        <div v-if="item.houseCheckStatus == 1" class="unreviewed">待核验</div>
        <div v-if="item.putaway == 2" class="shelf">已上架</div>
        <div v-if="item.putaway == 3" class="xia">已下架</div>
        <div class="intrduce">
          <span class="title1">{{ item.subdistrict }}</span>
          <span class="title2"
            ><span v-show="item.rentalWay == 1">合租</span
            ><span v-show="item.rentalWay == 2">整租</span>|<span>{{
              item.houseType
            }}</span
            >|<span>{{ item.houseAcre }}m<span class="up">2</span></span
            >|<span>{{ item.floor }}</span></span
          >
          <span v-show="item.distance" class="title2"
            ><van-icon name="location" />{{ item.distance }}</span
          >
          <span v-show="item.rentalWay == '2'" class="title3">{{
            item.leasePrice
          }}</span>
          <span
            v-show="item.rentalWay == '1'"
            class="title4"
            @click="
              tomyroom(item.rentalWay, item.houseId, item.roomId, item.putaway)
            "
            >房间管理</span
          >
        </div>
      </div>
      <div
        v-show="
          item.houseCheckStatus == 2 && item.payMargin == 1 && item.putaway != 3
        "
        class="pbox"
      >
        <div class="pmoney daizhi">
          <van-icon @click="goBond" size="12px" name="question-o" />保证金:<span
            >待支付</span
          >
        </div>
        <div class="explain" @click="goBond">保证金说明</div>
      </div>
      <div
        v-show="
          item.houseCheckStatus == 1 && item.putaway != 3 && item.putaway != 2
        "
      >
        <div class="daishen">
          <div>
            <van-icon @click="goBond" size="12px" name="question-o" /><span
              >核验通过后需要交纳保证金才能上架</span
            >
            <div class="explain" @click="goBond">保证金说明</div>
          </div>
          <button @click="goInfo(item.houseId, item.roomId)">查看房源</button>
        </div>
      </div>
      <div
        v-show="item.houseCheckStatus == 3 && item.putaway != 3"
        class="btnpart"
      >
        <van-button
          v-if="item.putaway != 3"
          @click="removeHouse(item.houseId, item.caution_money)"
          class="borbox weiguo"
          >删除房源</van-button
        >
        <van-button
          @click="changehouse(item.houseId, item.roomId)"
          class="borbox weiguo"
          >重新提交</van-button
        >
      </div>
      <div
        v-show="
          (item.houseCheckStatus == 2 && item.payMargin == 1) ||
          item.payMargin == 2
        "
        class="btnpart"
      >
        <van-button
          class="inbox"
          @click="changehouse(item.houseId, item.roomId)"
          >修改房源</van-button
        >
        <van-button
          v-show="item.putaway == 2"
          @click="showdownhouse(item.houseId)"
          class="borbox"
          >下架</van-button
        >
        <!-- <van-button
          v-show="item.putaway == 1"
          @click="uphouse(item.payMargin, item.houseId)"
          class="borbox"
          >上架</van-button
        > -->
        <van-button
          v-show="item.houseCheckStatus == 2 && item.payMargin == 1"
          @click="jumptoservicerentowner(item.houseId)"
          class="shenhe"
          >支付上架</van-button
        >
        <van-button
          v-show="
            item.houseCheckStatus == 2 &&
            item.payMargin == 1 &&
            item.putaway != 3
          "
          @click="removeHouse(item.houseId, item.caution_money)"
          class="inbox"
          style="margin-right: 10px"
          >删除房源</van-button
        >
      </div>
      <div v-if="item.putaway == 3">
        <van-button
          v-show="item.putaway == 3"
          @click="uphouse(item.payMargin, item.houseId, item.caution_money)"
          class="shangjia"
          >上架房源</van-button
        >
      </div>
    </div>
    <van-popup v-model="show1">
      <div class="content">
        <div class="box1">暖暖提醒</div>
        <div class="box2">
          下架房源后将不在享受平台推荐曝光，您确认下架房源吗？
        </div>
        <div class="btn">
          <button @click="downhouse()">确认下架</button>
          <button @click="show1 = false">我再想想</button>
        </div>
      </div>
    </van-popup>
    <van-popup v-model="show2">
      <div class="tipcontent">
        <div class="box1">亲，恭喜您的房源核验通过！</div>
        <div class="box2">
          交纳保证金上架即刻获得首页房源曝光，并获得平台自动推送本地租客福利！
        </div>
        <button @click="show2 = false">我知道了</button>
      </div>
    </van-popup>
    <!-- <van-popup v-model="show3">
      <div class="showcontent">
        <div class="title">平台为什么要收取保证金？</div>
        <div class="wcontent">
          为了保障房东直租房源的真实性，预防中介、二房东等人介入，方便平台更好的服务个人房东，上架房源时需要房东交纳50元房源真实保证金及50元非中介保证金，合计100元，同时平台采用隐私号码保护防止中介骚扰！
        </div>
        <div class="title">如何交纳保证金？</div>
        <div class="wcontent">
          在【我的】个人中心—【我的房源】—【房源管理】界面，直接点击【去支付】跳转微信支付即可。
        </div>
        <div class="title">租房保证金可以退吗？如何退款？</div>
        <div class="wcontent">
          保证金可以随时退还；该房源未被投诉为虚假房源或中介房源，当您主动下架房源后，保证金会自动退还到【我的】—“我的现金”里面，你可以随时进行【提现】或作为再上架房源保证金的使用。
        </div>
        <div class="title">保证金退款提现多久到账？</div>
        <div class="wcontent">
          当您手动下架并在我的个人中心申请提现后，平台会在1-2个工作日内核实并联系您退还保证金。
        </div>
        <van-icon
          @click="show3 = false"
          class="closebtn"
          color="#333"
          size="22px"
          name="close"
        />
      </div>
    </van-popup> -->
    <!-- <button @click="show3=true">点我显示弹窗</button> -->
  </div>
</template>

<script>
import { getRentownerhouse, houseupdown } from "../../apis/house.js";
import local from "../../utils/local.js";
import { Dialog } from "vant";
import { deleteHouse } from "@/apis/user";
export default {
  data() {
    return {
      houselist: [],
      show1: false,
      show2: false,
      show3: false,
      downid: "",
    };
  },
  created() {
    this.getlist();
  },
  methods: {
    goInfo(id) {
      this.$router.push({ path: "/RoomInformation", query: { houseId: id } });
    },
    removeHouse(houseId, money) {
      if (money != 0) {
        this.$dialog
          .alert({
            title: "温馨提示",
            message: "当前保证金退款还未通过审核，暂无法删除该房源",
            confirmButtonColor: "#45b7cb",
            theme: "round-button",
            messageAlign: "left",
          })
          .then(() => {});
      } else {
        this.$dialog
          .confirm({
            title: "温馨提示",
            className: "leftpart",
            confirmButtonText: "确定",
            confirmButtonColor: "#45b7cb",
            cancelButtonText: "取消",
            message: "您确定要删除该房源吗",
            messageAlign: "left",
          })
          .then(() => {
            deleteHouse({ house_id: houseId }).then((res) => {
              console.log("deleteHouse", res);
            });
            setTimeout(() => {
              this.getlist();
            }, 100);
          })
          .catch(() => {});
      }
    },
    gobao() {
      this.$router.push("/servicerentowner");
    },
    goBond() {
      this.$router.push("/Bond");
    },
    back() {
      this.$router.go(-1);
    },
    tomyroom(e, houseid, roomid, on) {
      if (e == 1) {
        this.$router.push({ path: "/myroom", query: { houseId: houseid } });
      } else if (e == 2 && on == 2) {
        // local.set("roomId", roomid);
        this.$router.push({ path: "/housedetail", query: { roomId: roomid } });
      }
    },
    uphouse(e, id, money) {
      if (e == 1 && money == 0) {
        // this.$toast("您需要支付房源保证金");
        Dialog.confirm({
          message: "您的保证金已申请退还，需要重新交纳保证金才能上架哦~",
          title: "暖暖提醒",
          confirmButtonText: "支付上架",
          cancelButtonText: "好的",
        }).then(() => {
          this.$router.push({
            path: "/servicerentowner",
            query: { houseId: id },
          });
        });
      } else if (e == 1 && money != 0) {
        this.$dialog
          .alert({
            title: "暖暖提醒",
            message:
              "您当前保证金已经申请提现还未通过，请等待通过后再缴纳保证金上架",
            confirmButtonColor: "#45b7cb",
            theme: "round-button",
            messageAlign: "left",
          })
          .then(() => {});
      } else if (e == 2) {
        this.$toast.loading({
          duration: 0,
          message: "加载中...",
          forbidClick: true,
        });
        houseupdown({ put: "2", houseId: id }).then((res) => {
          console.log("结果", JSON.stringify(res));
          if (res.code == 200 || res.code == 201) {
            this.$toast.clear();
            this.getlist();
            this.$dialog.alert({
              message:
                "恭喜！您的房源已成功上架！请等待租客通过隐私号码或在线聊天的方式与您联系",
              confirmButtonColor: "#45b7cb",
              theme: "round-button",
              confirmButtonText: "朕知道了",
              messageAlign: "left",
            });
          } else if (res.code == 2072) {
            // this.$toast(res.msg);
            this.$dialog
              .alert({
                title: "暖暖提醒",
                message:
                  "您当前保证金已经申请提现还未通过，请等待通过后再缴纳保证金上架",
                confirmButtonColor: "#45b7cb",
                theme: "round-button",
                messageAlign: "left",
              })
              .then(() => {});
          } else {
            this.$toast(res.msg);
          }
        });
      }
    },
    showdownhouse(id) {
      this.show1 = true;
      this.downid = id;
    },
    downhouse() {
      this.$toast.loading({
        duration: 0,
        message: "加载中...",
        forbidClick: true,
      });
      houseupdown({ put: "1", houseId: this.downid }).then((res) => {
        if (res.code == 200 || res.code == 201) {
          this.$toast.clear();
          this.getlist();
          this.show1 = false;
          this.$toast("下架成功");
        }
      });
    },
    getlist() {
      getRentownerhouse().then((res) => {
        this.houselist = res.result.list;
        console.log("houselist:", res);
        // this.houselist.forEach((el) => {
        //   if (el.houseCheckStatus == 2 && el.payMargin == 1) {
        //     Dialog({
        //       title: "亲，恭喜您的房源核验通过！",
        //       message:
        //         "交纳保证金上架即刻获得首页房源曝光，并获得平台自动推送本地租客福利！",
        //       confirmButtonColor: "#45b7cb",
        //       theme: "round",
        //       confirmButtonText: "我知道了",
        //     });
        //   }
        // });
      });
    },
    toadd() {
      this.$router.push({ path: "/releasehouse" });
    },
    jumptoservicerentowner(e) {
      Dialog({
        title: "暖暖提醒",
        message:
          "交纳保证金后房源自动上架，还将获得首页房源置顶曝光和自动推送同城租客福利哦~",
        confirmButtonColor: "#45b7cb",
        theme: "round",
        confirmButtonText: "我知道了",
        messageAlign: "left",
      });
      this.$router.push({ path: "/servicerentowner", query: { houseId: e } });
    },
    changehouse(id) {
      Dialog({
        title: "暖暖提醒",
        message: "数据显示，上传清晰美观的房源图片更容易获得租客青睐哦~",
        confirmButtonColor: "#45b7cb",
        theme: "round",
        confirmButtonText: "我知道了",
        messageAlign: "left",
      });
      this.$router.push({ path: "/ranthousechange", query: { houseId: id } });
    },
  },
};
</script>

<style lang="less" scoped>
.nomore {
  color: gray;
  text-align: center;
  margin: 20px 0;
}
.shan {
  margin-top: 5px;
  color: #d43b33;
  font-size: 13px;
  font-weight: bold;
  text-decoration: underline;
}
@keyframes move {
  10% {
    transform: translateX(-10vw);
  }
  20% {
    transform: translateX(-30vw);
  }
  30% {
    transform: translateX(-50vw);
  }
  40% {
    transform: translateX(-70vw);
  }
  50% {
    transform: translateX(-90vw);
  }
  60% {
    transform: translateX(-110vw);
  }
  70% {
    transform: translateX(-130vw);
  }
  80% {
    transform: translateX(-150vw);
  }
  90% {
    transform: translateX(-170vw);
  }
  100% {
    transform: translateX(-190vw);
  }
}
.notice {
  display: flex;
  background-color: #f4f4f4;
  margin: 5px 0;
  justify-content: flex-end;
  padding: 10px 0;
  box-sizing: border-box;
  overflow: hidden;
  img {
    vertical-align: middle;
    animation: move 8s infinite linear;
    transition: 2s;
    position: relative;
    right: -70vw;
  }
  div {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.671);
    animation: move 8s infinite linear;
    transition: 2s;
    position: relative;
    right: -70vw;
  }
}
.tuihui {
  position: absolute;
  bottom: 0;
  font-size: 12px;
  transform: translateY(45px);
  span {
    color: #d43b33;
    font-weight: bold;
    font-size: 17px;
  }
}
.shangjia {
  position: absolute;
  right: 100px;
  bottom: 10px;
  background-color: #45b7cb;
  border-radius: 16px;
  width: 85px;
  height: 35px;
  font-size: 12px;
  color: #fff;
}
.weiguo {
  transform: translateX(2.7vw);
}
.daizhi {
  transform: translateX(-5vw);
}
.explain {
  font-size: 14px;
  font-weight: bold;
  margin-left: 10px;
  color: #d43b33;
  margin-top: 5px;
  text-decoration: underline #d43b33;
}
.shenhe {
  width: 85px;
  background-color: #45b7cb !important;
  color: #fff;
  margin-right: 10px;
}
.daishen {
  font-size: 12px;
  color: #333;
  // transform: translateX(-120px);
  margin: 15px 0;
  display: flex;
  justify-content: space-between;
  button:active {
    background-color: #ddd;
  }
  button {
    color: #45b7cb;
    margin-right: 0px;
    border: 1px solid #45b7cb;
    width: 90px;
    height: 35px;
    min-width: 90px;
    background-color: #fff;
    border-radius: 20px;
  }
  span {
    font-size: 12px;
    color: #666666;
    font-weight: bold;
    margin-left: 3px;
  }
}
.xia,
.shelf,
.unreviewed,
.unshelf,
.fail {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 12px;
  color: #ffffff;
  width: 12vw;
  height: 6vw;
  border-radius: 5px 0 5px 0;
  text-align: center;
}
.unreviewed {
  background-color: #45b7cb;
}
.unshelf {
  background-color: #ffb816;
}
.fail {
  background-color: #d43b33;
}
.shelf {
  background-color: #5dc399;
}
.xia {
  background-color: #cccccc;
}
.hpart {
  position: relative;
  margin: 0 15px;
  // overflow: hidden;
  padding: 10px;
  // border: 1px solid #ccc;
  // box-shadow: 0px 1px 10px 5px #eee;
  margin-bottom: 10px;
  border-radius: 10px;
  background-color: white;
  .house {
    display: flex;
    margin: 10px 0;
    position: relative;
    .intrduce {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      margin-left: 10px;
      .title1 {
        font-size: 16px;
        font-weight: 550;
        color: #333333;
      }
      .title2 {
        font-size: 12px;
        color: #a0a0a0;
        span {
          margin: 0 2px;
        }
        .up {
          font-size: 9px;
          vertical-align: super;
        }
      }
      .title3 {
        color: #d43b33;
        font-size: 16px;
        font-weight: bold;
        span {
          font-size: 12px;
          margin-left: 3px;
        }
      }
      .title4 {
        font-size: 14px;
        color: #999;
        text-decoration: underline;
        font-weight: bolder;
      }
    }
  }
  .btnpart {
    display: flex;
    flex-direction: row-reverse;
    .van-button {
      height: 35px;
      font-size: 12px;
      border-radius: 20px;
      border: none;
      padding: 0 15px;
    }
    .borbox {
      color: #45b7cb;
      border: 1px solid #45b7cb;
      margin-right: 10px;
    }
    .inbox {
      // background-color: #45b7cb;
      color: #45b7cb;
      margin-right: 0px;
      border: 1px solid #45b7cb;
    }
    .state {
      background-color: #fff;
      color: #45b7cb;
    }
    .unpass {
      color: #d43b33;
    }
  }
}
.pbox {
  display: flex;
  justify-content: space-between;
  padding: 15px;
  .pmoney {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #333;
    span {
      font-size: 14px;
      color: #d43b33;
      font-weight: bold;
    }
  }
}
.content {
  width: 300px;
  height: 180px;
  background-color: #fff;
  text-align: center;
  .box1 {
    padding: 20px 0;
    font-size: 16px;
    color: #45b7cb;
    font-weight: bold;
  }
  .box2 {
    margin: 0 auto;
    width: 210px;
    font-size: 14px;
    color: #333;
  }
  .btn {
    margin-top: 30px;
    button {
      font-size: 14px;
      margin: 0 10px;
      width: 110px;
      height: 35px;
      border-radius: 20px;
      &:first-child:active {
        background-color: #45b7cb;
        color: #fff;
      }
      &:last-child:active {
        background-color: #45b7cb77;
      }
      &:first-child {
        background-color: #fff;
        border: 1px solid #f1f1f1;
        color: #999;
      }
      &:last-child {
        background-color: #45b7cb;
        border: 1px solid #45b7cb;
        color: #fff;
      }
    }
  }
}
.tipcontent {
  width: 300px;
  height: 200px;
  background-color: #fff;
  text-align: center;
  .box1 {
    padding: 30px 0 20px;
    font-size: 18px;
    font-weight: bold;
    color: #45b7cb;
  }
  .box2 {
    padding: 0 20px;
    font-size: 14px;
    color: #666;
  }
  button {
    margin-top: 20px;
    border-radius: 20px;
    color: #fff;
    border: 1px solid #45b7cb;
    background-color: #45b7cb;
    padding: 7px 25px;
  }
}
.van-popup--center {
  border-radius: 8px;
}
.showcontent {
  width: 300px;
  background-color: #fff;
  padding: 5px 10px 15px;
  overflow: scroll;
  position: relative;
  border-radius: 15px;
  .title {
    color: #45b7cb;
    font-weight: bold;
    padding: 10px 0;
  }
  .wcontent {
    font-size: 13px;
    color: #666;
    margin-bottom: 10px;
  }
  .closebtn {
    background-color: #fff;
    z-index: 10000;
    position: absolute;
    right: 10px;
    top: 10px;
  }
}
</style>